<template>
  <view class="pay">
    <!-- 收货地址 -->
    <view class="user_info_row">
      <view class="user_info">
        <view>{{ address.userName }}</view>
        <view>{{ address.allName }}{{ address.detailInfo }}</view>
      </view>
      <view class="user_phone">{{ address.telNumber }}</view>
    </view>

    <!-- 购物车内容 -->
    <view class="cart_content">
      <view class="cart_title">购物车</view>
      <view class="cart_main">
        <view class="cart_item" v-for="item in cart" :key="item.goods_id">
          <!-- 商品图片 -->
          <navigator class="cart_img_wrap">
            <image mode="widthFix" :src="item.goods_small_logo"></image>
          </navigator>
          <!-- 商品信息 -->
          <view class="cart_info_wrap">
            <view class="goods_name">{{ item.goods_name }}</view>
            <view class="goods_price_wrap">
              <view class="goods_price">￥{{ item.goods_price }}</view>
              <view class="cart_num_tool">
                <view class="goods_num">X {{ item.num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="footer_tool">
      <!-- 总价格 -->
      <view class="total_price_wrap">
        <view class="total_price">
          合计: <text class="total_price_text">￥{{ totalPrice }}</text>
        </view>
        <view>包含运费</view>
      </view>
      <!-- 结算 -->
      <view class="order_pay_wrap" @click="handleOrderPay">
        结算({{ totalNum }})
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getStorage,
    setStorage,
  } from "../../api/Storage"
  import {
    requestPayment
  } from "../../api/index.js"
  import {
    showToast
  } from "../../utils/util.js"
  export default {
    data() {
      return {
        address: {},
        cart: [],
        totalPrice: 0,
        totalNum: 0,
        provider: ''
      }
    },

    onLoad() {
      const addressList = getStorage("addressList") || []
      const addressFilter = addressList.filter((v) => v.type === 1)
      this.address = addressFilter[0]
    },
    onShow() {
      // 1 获取缓存中的购物车数据
      let cart = getStorage("cart") || []
      // 过滤后的购物车数组
      cart = cart.filter((v) => v.checked)
      // 1 总价格 总数量
      let totalPrice = 0
      let totalNum = 0
      cart.forEach((v) => {
        totalPrice += v.num * v.goods_price
        totalNum += v.num
      })
      this.cart = cart
      this.totalPrice = totalPrice
      this.totalNum = totalNum
    },
    methods: {
      async handleOrderPay() {
        const token = getStorage("token")
        if (!token) {
          uni.navigateTo({
            url: "/pages/auth/auth",
          })
          return
        }

        uni.getProvider({
          service: 'oauth',
          success: (res) => {
            this.provider = res.provider[0]
            console.log(this.provider);
          }
        })

        const order_price = this.totalPrice
        const consignee_addr = this.address.all
        const cart = this.cart
        let goods = []
        cart.forEach((v) =>
          goods.push({
            goods_id: v.goods_id,
            goods_number: v.num,
            goods_price: v.goods_price,
          })
        )
        const orderParams = {
          order_price,
          consignee_addr,
          goods,
        }

        this.$http({
          url: "/my/orders/create",
          method: "POST",
          data: orderParams,
        }).then(res => {
          const order_number = res.order_number
          this.$http({
            url: "/my/orders/req_unifiedorder",
            method: "POST",
            data: {
              order_number,
            },
          }).then(res => {
            const {
              pay
            } = res
            if (this.provider === 'weixin') {
              pay.provider = 'wxpay'
            }
            requestPayment(pay).then(res => {
              this.$http({
                url: "/my/orders/chkOrder",
                method: "POST",
                data: {
                  order_number,
                },
              }).then(res => {
                showToast({
                  title: "支付成功",
                })
                let newCart = getStorage("cart")
                newCart = newCart.filter((v) => !v.checked)
                setStorage("cart", newCart)

                wx.navigateTo({
                  url: "/pages/order/index",
                })
              })
            })
          })

        })
      }
    }
  }
</script>

<style lang="scss">
  .pay {
    /* #ifdef H5 */
    padding-bottom: 98upx;

    /* #endif */
    .user_info_row {
      display: flex;
      padding: 20upx;

      .user_info {
        width: 450upx;

        view {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

      }

      .user_phone {
        flex: 1;
        text-align: right;
      }
    }

    .cart_content {
      .cart_title {
        padding: 20upx;
        font-size: 36upx;
        color: var(--themeColor);
        border-top: 1upx solid currentColor;
        border-bottom: 1upx solid currentColor;
      }

      .cart_main {
        width: 100%;

        .cart_item {
          box-sizing: border-box;
          display: flex;
          padding: 10upx 15upx;
          border-bottom: 1upx solid #ccc;

          .cart_img_wrap {
            width: 198upx;
            height: 198upx;
            display: flex;
            justify-content: center;
            align-items: center;

          }

          .cart_info_wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 15upx;

            .goods_name {
              display: -webkit-box;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              color: #666;
            }

            .goods_price_wrap {
              display: flex;
              justify-content: space-between;

              .goods_price {
                color: var(--themeColor);
                font-size: 34upx;
              }

              .cart_num_tool {
                display: flex;

                .goods_num {
                  width: 55upx;
                  height: 55upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }

    .footer_tool {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 90upx;
      background-color: #fff;
      display: flex;
      border-top: 1upx solid #ccc;
      padding-left: 10upx;

      .all_chk_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .total_price_wrap {
        flex: 5;
        padding-right: 15upx;
        text-align: right;

        .total_price {
          .total_price_text {
            color: #eb4450;
            font-size: 34upx;
            font-weight: 600;
          }
        }
      }

      .order_pay_wrap {
        flex: 3;
        background-color: #eb4450;
        color: #fff;
        font-size: 32upx;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
